<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我要投资</title>
    <div th:include="includeJs::includeJs"></div>
	<div th:include="includeJs::layui_js"></div>
	<link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>

<body>
<div class="header">
    <div th:replace="includeJs::dingding_header"></div>

    <div class="clear"></div>

</div>
<div th:replace="includeJs::dingding_nav">

</div>

<div class="clear"></div>
<div style=" width:100%; background:#f3f6f8">
<div class="main">
	<div class="daohang">
		<a th:href="@{/specimens/toIndex}">首页</a>
		<a th:href="@{/specimens/toMytz}">>放心投</a>
		<a th:text="'>放心投'+${qtspe.sid}+'号项目详情'"></a>
		<!--<a th:text="'我要投资 > 放心投 > 放心投'+${qtspe.sid}+'号项目详情'"></a>-->
	</div>
   <div class="mytz">
      <div class="mytz_tit" th:text="'放心投'+${qtspe.sid}+'号'"><img th:src="@{/img/account/shape-4.png}"></div>
		   <div class="mytz_nr">
			   <div class="mytz_nrl">
				   <div class="mytz_nrl_l"><p class="p1">预期收益</p><p class="p2" th:text="${qtspe.expectedyield}+'%'"></p></div>
				   <div class="mytz_nrl_l"><p class="p1">投资期限</p><p class="p2" th:text="${qtspe.investhorizon}+'天'"></p></div>
				   <input type="hidden" id="allmoney" name="allmoney" th:value="${qtspe.allmoney}"/>
				   <input type="hidden" id="markName" name="markName" th:value="${qtspe.name}"/>
				   <input type="hidden" id="markId" name="markId" th:value="${qtspe.sid}"/>
				   <input type="hidden" id="startmoney" name="startmoney" th:value="${qtspe.startmoney}"/>
				   <input type="hidden" id="sid" name="sid" th:value="${qtspe.sid}"/>
				   <input type="hidden" id="couponId">
				   <input type="hidden" id="coupon_target">
				   <input type="hidden" id="coupon_money">
				   <div class="clear"></div>
			   </div>
			   <div class="mytz_nrc">
				   <p class="p1" th:text="${'剩余可投金额:'+surplus_money}+'元'" id="surplus_money"></p>
				   <p class="p3" style="margin-top:10%">进度：</p>
				   <div style="margin-top:10%">
					   <div class="layui-progress" lay-showpercent="true">
						   <div class="layui-progress-bar" th:lay-percent="${allTouzi}" ></div>
					   </div>
				   </div>
			   </div>
			   <div class="mytz_nrr">
				   <div class="mytz_nrr_up">
					   <div class="my_ll"><p th:text="'可用余额：'+${userinfo.money}+'元'" ></p></div>
					   <a type="button" class="my_lr" th:href="@{/recharge}">充值</a>
				   </div>
				   <div class="mytz_nrr_c">
					   <input name="money" type="text" id="money" autocomplete="off">
					   <button class="btn_myzt" id="ljtz" style="cursor:pointer;height: 42px;border: 0px solid #00000080;" lay-event="zhifu">立即投资</button>
				   </div>
				   <div class="mytz_nrr_down"></div>
			   </div>
		   </div>
   </div>
   <div class="mytz_xq">
	  	<div class="subtab">
	  		<ul>
	  		   <li id="tab0" style="display: none" onclick="javascript:tab(0);">项目详情</li>
               <li id="tab1" class="bg_block" onclick="javascript:tab(1);">投资记录</li>
               <li id="tab2" onclick="javascript:tab(2);">投资人数占比</li>
	  		</ul>
	  	</div>
	  	<!-- 项目详情 -->
		<div id="tab_hd0" style="display:none">
		  <div class="project-info">
            <div>产品详情</div>
            <div class="tablew_box">
              <table id="projectable" class="table">
                <thead>
                  <tr>
                    <td>到期还款日</td>
                    <td>还款方式</td>
                    <td>最大投资份额</td>
                    <td>最小投资份额</td>
                    <td>投资单位</td>
                    <td>担保类型</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>2015-09-01</td>
                    <td>一次还本付息</td>
                    <td>1000份</td>
                    <td>1份</td>
                    <td>***</td>
                    <td>***</td>
                  </tr>
                </tbody>
              </table> 
            </div>
            <div>暂时未设计完其余部分</div>
          </div>
		</div>
		  	<!-- 投资记录 -->
		  	<div id="tab_hd1" style="display:block">
		  		<div class="invest-record">
		  			<table id="recordtable" class="table">
		  				<thead>
		  					<tr>
		  						<td width="20%">投资人</td>
		  						<td width="20%">加入金额</td>
		  						<td width="20%">加入时间</td>
								<td width="20%">可收回金额</td>
								<td width="20%">收回时间</td>
		  					</tr>
		  				</thead>
		  				<tbody id="tbody" >

		  				</tbody>
		  			</table>
					<div id="test1" align="center"></div>
		  		</div>
		  	</div>
		  	<!-- 专享服务 -->
		  	<div id="tab_hd2" style="display:none">
				<div id='pie' style="width: 500px;height: 600px;left: 344px" ></div>
		  	</div>
        <div style="width:100%; height:30px;"></div>
   </div>
</div>
</div>
<!--密码输入层-->
<div  id="password-div" class="password-div" style="display: none;margin-left: 120px;margin-top: 35px;">
	<label for="password" class="password-lable" id="pwd">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<input id="password" type="password" name="password" maxlength="6">
	</label>
	<div style="margin-top: 50px;margin-left: 50px;">
		<button type="button" id="qdcz" class="layui-btn layui-btn-danger  layui-btn-radius" style="width: 100px;">确定</button>
	</div>
</div>
<div class="clear"></div>
<div class="footer" style=" margin-top:40px">
   <div class="footer_m">
       <div class="footer_l">使用条款 | 隐私保护</div>
       <div class="footer_r">© 2015 （杭州）金融信息服务有限公司    杭ICP备0000000号</div>
   </div>
</div>
<div id="couponShow" style="display: none">
	<table class="layui-table" lay-skin="line">
		<colgroup>
			<col width="150">
			<col width="150">
			<col width="200">
			<col width="200">
			<col width="200">
		</colgroup>
		<thead>
		<tr>
			<th>优惠券名称</th>
			<th>使用条件</th>
			<th>减免金额</th>
			<th>过期时间</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody id="couponList">

		</tbody>
	</table>
</div>
</body>
<script type="text/html" id="toolDemo">
	<button lay-event="update" class="layui-btn layui-btn-sm layui-btn-danger" ><i class="layui-icon layui-icon-edit"></i>使用</button>
</script>
<script>
	let sid = [[${sid}]];
	let page = [[${page}]];

	function formatDate(now) {
		var year=now.getFullYear();  //取得4位数的年份
		var month=now.getMonth()+1;  //取得日期中的月份，其中0表示1月，11表示12月
		var date=now.getDate();      //返回日期月份中的天数（1到31）
		var hour=now.getHours();     //返回日期中的小时数（0到23）
		var minute=now.getMinutes(); //返回日期中的分钟数（0到59）
		var second=now.getSeconds(); //返回日期中的秒数（0到59）
		return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
	}
	function dateFormat(fmt, date) {
		let ret;
		const opt = {
			"Y+": date.getFullYear().toString(),        // 年
			"m+": (date.getMonth() + 1).toString(),     // 月
			"d+": date.getDate().toString(),            // 日
			"H+": date.getHours().toString(),           // 时
			"M+": date.getMinutes().toString(),         // 分
			"S+": date.getSeconds().toString()          // 秒
			// 有其他格式化字符需求可以继续添加，必须转化成字符串
		};
		for (let k in opt) {
			ret = new RegExp("(" + k + ")").exec(fmt);
			if (ret) {
				fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			};
		};
		return fmt;
	}
	var indexs ;

		layui.use(['layer','element','laypage','table'], function(){ //独立版的layer无需执行这一句
		var $ = layui.jquery,
				layer = layui.layer,//独立版的layer无需执行这一句
				element = layui.element,
				laypage = layui.laypage
			var table = layui.table;
			$("#ljtz").click(function () {
				let $sr= $("#money").val();
				if($sr==null||$sr==""){
					layer.msg('请输入金额',{time:3000,icon:2});
					return false;
				}
				$.ajax({
					url:"/specimens/cz",
					type: "post",
					dataType:"json",
					data:{
						markName:$("#markName").val(),
						markId:$("#markId").val(),
						money:$("#money").val(),
						startmoney:$("#startmoney").val(),
						sid:$("#sid").val(),
						password:$("#password").val()
					},
					success: function (data) {
						if(data==4){
							layer.msg('您还未设置交易密码，请前往设置',{time:3000,icon:2});
							return;
						}else if(data =='2'){
							layer.msg('起投金额是'+$("#startmoney").val()+"元");
							$("#money").val(" ");
							$("#pwd ul li").text('');
							layer.close(indexs)
						}else if(data =='3'){
							layer.msg('剩余份额不足');
							$("#money").val(" ");
							layer.close(indexs)
						}else if(data =='0'){
							layer.msg('余额不足请充值后再投资');
							$("#money").val(" ");
							$("#pwd ul li").text('');
							layer.close(indexs)
						}else {
							let params = new URLSearchParams();
							params.append("money",$sr);
							//后台查询可用的优惠券
							axios({
								method:'post',
								url:'/usableCouponList',
								headers: { 'content-type': 'application/x-www-form-urlencoded'},
								data: params
							}).then(res=>{
								if(res.data.coupon.length >= 1){

									$("#couponList").empty();
									//展示优惠券列表
									$.each(res.data.coupon,function (index,val) {
										let d = new Date(val.expiration_date);
										let date = formatDate(d);
										$("#couponList").append("<tr>\n" +
												"\t\t\t<td><input hidden class='couponId' value='"+val.id+"'>" +
												"<input hidden class='coupon_target' value='"+val.coupon_target+"'>" +
												"<input hidden class='coupon_money' value='"+val.coupon_money+"'>" +
												val.coupon_name+"</td>\n" +
												"\t\t\t<td>"+val.coupon_target+"</td>\n" +
												"\t\t\t<td>"+val.coupon_money+"</td>\n" +
												"\t\t\t<td>"+date+"</td>\n" +
												"\t\t\t<td><button type=\"button\" id='use' \tclass=\"layui-btn layui-btn-normal\">使用</button></td>\n" +
												"\t\t</tr>");
									});

									layer.confirm('您可用的优惠券,是否使用', {
									btn: ['是', '否'],
									cancel:function(index) {
										mimaWindow();
									}
									},function (index) {  //选择了是
										layer.close(index);
										layer.open({
											type: '1',
											area: ["800px","500px"],
											title: '优惠券列表',
											closeBtn: 1, //不显示关闭按钮
											fixed: false, //不固定
											shadeClose: false, //开启遮罩关闭
											content: $("#couponShow"),
											cancel:function(index, layero){
												layer.close(index);
												mimaWindow();
												layer.msg("您取消了使用优惠券",{icon:2});
												}
											});
									},function () { //选择了否
										mimaWindow();
									});
								}else {
									mimaWindow();
								}
							});
							$("#pwd").focus();
						}
					},
					error:function () {
						$(btn).removeClass("layui-btn-disabled")
						$(btn).addClass("layui-btn-normal");
						btn.disabled = false;
						layer.msg('呀呀呀,报错啦',{time:3000,icon:2});
						return false;
					}
				});
				//点击使用优惠券后的操作
				$("#couponList").on('click','#use',function () {
					let coupon_target = $(this).parents("tr").find(".coupon_target").val();
					let couponId =  $(this).parents("tr").find(".couponId").val();
					let coupon_money = $(this).parents("tr").find(".coupon_money").val();

					$("#coupon_money").val(coupon_money);
					$("#coupon_target").val(coupon_target);
					$("#couponId").val(couponId);
					parent.layer.closeAll();
					mimaWindow();
				});

				$("#qdcz").click(function () {
					let $password= $("#password").val();
					$(this).removeClass("layui-btn-normal")
					$(this).addClass("layui-btn-disabled");
					this.disabled = true;
					var btn = this;
					if(null == $password || $password.length!=6){
						$(this).removeClass("layui-btn-disabled")
						$(this).addClass("layui-btn-normal");
						this.disabled = false;
						layer.msg('请输入密码。',{time:2000,icon:2});
						return;
					}else {
						$.ajax({
							url:"/specimens/tzAdd",
							type:"post",
							data:{
								markName:$("#markName").val(),
								markId:$("#markId").val(),
								money:$("#money").val(),
								startmoney:$("#startmoney").val(),
								sid:$("#sid").val(),
								password:$("#password").val(),
								coupon_money:$("#coupon_money").val(),
								coupon_target:$("#coupon_target").val(),
								couponId:$("#couponId").val(),
							},
							dataType:"json",
							success:function (data) {
								if(data =='1'){
									layer.msg('投资成功',{time:2000,icon:1});
									$("#money").val(" ");
									location.reload();
								}else if(data =='6'){
									$(btn).removeClass("layui-btn-disabled");
									$(btn).addClass("layui-btn-normal");
									btn.disabled = false;
									layer.msg("密码错误",{time:2000,icon:2});
									$("#pwd ul li").text('');
									return;
								}else if(data == '7'){
									$(btn).removeClass("layui-btn-disabled");
									$(btn).addClass("layui-btn-normal");
									btn.disabled = false;
									layer.msg("账号已被锁定,请明天再输入",{time:2000,icon:2});
									$("#pwd ul li").text('');
									layer.close(indexs)
								}
							}
						});
					}
				})
			}),
			laypage.render({
				url:"specimens/toNowtz",
				elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
				count:page,
				limit:5,
				curr: location.href.replace('#!fenye=','')
				,hash: 'fenye'
				,page: {limit:10,page:1,limits:[10,20,30],layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
				,jump:function(obj,first){   //当我点击跳转页面时会执行另一个ajax
					$.ajax({
						url:'/specimens/toNowtzfenye',
						data:{
							page:obj.curr,
							limit:obj.limit,
							sid:sid,
						},
						type:'post',
						success:function(data){
							$("#tbody").empty();
							let app = '';
							data.forEach(function (d,index) {
									d.Investment_time = d.Investment_time.substr(0,19).replace("T"," ");
									d.Investment_time = mytime(d.Investment_time);

									d.recovery_time = d.recovery_time.substr(0,19).replace("T"," ");
									d.recovery_time = mytime(d.recovery_time);
									app+="<tr>\n" +
											"\t<td>"+d.nick_name+"</td>\n" +
											"\t<td>"+d.money+"</td>\n" +
											"\t<td>"+d.Investment_time+"</td>\n" +
											"\t<td>"+d.estimate_money+"</td>\n" +
											"\t<td>"+d.recovery_time+"</td>\n" +
											"</tr>";
							});
							$("#tbody").append(app);
						},
						error:function(){
							//console.log('网络错误，通信失败');
						}
					})
				}
			});

	});

	function mimaWindow() {
		indexs = layer.open({
			type: 1,
			title: '请输入密码',
			skin: 'layui-layer-demo', //样式类名
			area: ['450px', '200px'],
			closeBtn: 2, //不显示关闭按钮
			fixed: false, //不固定
			maxmin: true,
			content: $('#password-div'),
			cancel: function(){//右上角关闭回调
				//刷新父页面
				$("#pwd ul li").text('');
			}
		});
	}

	function mytime(oldTimes1) {
		let time1 = oldTimes1.split(' ')[0];
		// //console.log("1、第二种方式time1:" + time1)
		let arrTime = oldTimes1.split(' ')[1].split(':');
		// //console.log("2、第二种方式arrTime:" + arrTime)
		let time2 = arrTime.slice(1, arrTime.length).join(':');
		// //console.log("3、第二种方式time2:" + time2)
		let h = parseInt(arrTime[0]) + 8;
		// //console.log('4、第二种方式小时：', h);
		let newH = ((h < 24) ? h : (h % 24)).toString();
		if(newH<10){
			newH=" 0"+newH;
		}
		return time1 + ' ' + newH + ':' + time2;
	}

</script>
<script>
	//查询支付密码
	$(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
		var number = 6;   //定义输入最大值
		var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
		var list = $(".password-div ul li");  //定义list是li
		for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
			if(pw[i]){
				$(list[i]).text("·");
			}else{
				$(list[i]).text("");
			};
		};
	});
	$(".password-div ul").click(function(){
		$("input[name = 'password']").val("");
		$("#password").focus();
		$(".password-div ul li").text("");
	});
	$(function () {
		$(document).keydown(function (e) {
			if (e.keyCode === 13) {
				$("#qdcz").click();
			}
		});
	});
</script>
<script type="text/javascript">
	var sids = document.getElementById("sid").value;
	var myecharts = echarts.init(document.getElementById('pie'),'light');//在theme中的主题：light 明亮;dark 黑暗
	axios.get('/specimens/eacharts/'+sids).then(response=>{
		// 指定图表的配置项和数据
		var option =  {
			title: {
				text: '',
				//subtext: '纯属虚构',
				left: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				//data: ['0-500', '500-1000', '1000-1500','1500-2000','2000-2500','<2500']
			},
			series: [
				{
					name: '访问来源',
					type: 'pie',
					radius: '55%',
					center: ['50%', '60%'],
					data: response.data,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myecharts.setOption(option);
	});
</script>
</html>